<template lang="html">
  <div class="">
    <div class="search">
      <div class="input">
        <p>
          <label>渠道名称：</label><el-input v-model="searchData.displayName" placeholder="请输入内容" />
          <label>渠道状态：</label>
          <el-select v-model="searchData.channelStatus" placeholder="请选择">
            <el-option value="">请选择</el-option>
            <el-option value="停用" />
            <el-option value="启用"/>
          </el-select>
        </p>
        <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
      </div>
    </div>

    <div class="add">
      <el-button type="primary" @click="add">新增</el-button>
    </div>

    <dialogVue :dialog="dialog_add" :state="false" title="操作" @close="changeData" >
        <slot>
            <el-form ref="addFrom" :model="addFrom" :rules="rules" label-width="180px" class="demo-ruleForm">
                <el-form-item label="应用ID" prop="appId">
                    <el-select v-model="addFrom.appId" >
                    <el-option
                        v-for="(item,key) in payApp"
                        :key="key"
                        :label="item.appName"
                        :value="item.appId"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付渠道" prop="channelId">
                    <el-select v-model="addFrom.channelId" >
                    <el-option
                        v-for="(item,key) in channel"
                        :key="key"
                        :label="item.channelName"
                        :value="item.channelId"/>
                    </el-select>
                </el-form-item>
               
                <el-form-item label="渠道LOGO" >
                    <el-upload
                        class="upload-demo"
                        :action="uploadingImg"
                        :http-request="upload"
                        :on-change="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :limit="1" 
                        :auto-upload='false'
                        :on-exceed="errorUp"
                        list-type="picture">
                        <el-button size="small" slot="trigger"  type="primary">选取文件</el-button>
                        <el-button size="small" type="success" @click="upload">上传到服务器</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="渠道名称" prop="displayName">
                    <el-input v-model="addFrom.displayName" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-select v-model="addFrom.channelStatus" >
                        <el-option value="">请选择</el-option>
                        <el-option
                            v-for="(item,key) in Enable"
                            :key="key"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="渠道描述" >
                    <el-input v-model="addFrom.channelDesc" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="配置参数">
                    <el-input v-model="addFrom.channelParam" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="渠道排序">
                    <el-input v-model="addFrom.displayOrder" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item class="confirm">
                    <el-button type="primary" @click="add_Data('addFrom')">{{word}}</el-button>
                </el-form-item>
            </el-form>
        </slot>
    </dialogVue>
    <tableVue v-loading="loading" :list="list" :state="false" :total="total" @sizeChange="handSize">
      <slot>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="compile(scope.row)">编辑
            </el-button>
            <el-button
              v-if="scope.row.channelStatus == '启用'"
              size="mini"
              type="success"
              @click="on_off(scope.row,'DISABLE')">启用
            </el-button>

            <el-button
              v-if="scope.row.channelStatus == '停用'"
              size="mini"
              type="success"
              @click="on_off(scope.row,'ENABLE')">停用
            </el-button>
            <el-button
              size="mini"
              type="danger"
              class="del"
              @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </slot>
    </tableVue>
  </div>
</template>

<script>
import {
  Getlist,
  getpay_appId,
  getpay_channelId,
  search_app,
  addApp,
  setStatus,
  delApp
} from '@/api/payCenter/payApplyChannel'
import {
  upLoadingImg
} from "@/api/shoppingCentre/shoppingCentre";
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import Data from './index.js'

export default {
  components: {
	  tableVue,
    dialogVue
  },
  data() {
	  return JSON.parse(JSON.stringify(Data))
  },
  mounted() {
	this.getPayApplyList()
    this.getPayAppId()
    this.getChannel()
  },
  methods: {
        handlePreview(file){
            let reader = new FileReader();
            reader.readAsDataURL(file.raw);
            reader.onload =  () => {
                this.imgData.base64Str = reader.result.split(',')[1];
            }
            this.imgData.id = file.uid;
            this.imgData.fileOriginName = file.name;
            this.imgData.fileType = file.name.split('.')[1];
        },
        handleRemove(val){
            console.log(val)
        },
        upload() {
            if(this.imgData.base64Str==undefined ||this.imgData.base64Str==""){
                this.$message.error('请选择需要上传的图片！')
                return ;
            }
            this.$message({
                showClose: true,
                message: '图片正常在上传请稍后.......',
                type: 'warning'
            });
            var data = {
                base64Str : this.imgData.base64Str,
                fileOriginName : this.imgData.fileOriginName,
                fileType : this.imgData.fileType,
                id : this.imgData.id,
            }
            upLoadingImg(data).then(res=>{
                if (res.data.code == 'OK') {
                    this.displayLogo = res.data.data.fileURL;
                    this.$message.success('上传图片成功');
                    
                } else {
                // this.$message.error(res.data.message);
                }
            })
        },
        errorUp(){
            this.$message.error('只支持上传一张图片！')
        },
        // 编辑
        compile(item) {
            this.methods = "PUT";
            this.word = "更新"
            this.fileList = [];
            this.fileList.push({url:item.displayLogo,name:''})
            this.addFrom = item;
            
            this.$refs['addFrom'] &&(this.$refs['addFrom'].resetFields())
            this.dialog_add = true
        },
        //   新增
        add_Data(addFrdom) {
            this.$refs[addFrdom].validate(valid => {
                if (valid) {
                    addApp(this.addFrom,this.methods).then(res=>{
                        if(res.data.code=="OK"){
                             this.dialog_add = false;
                             if(this.methods=="POST"){
                                this.$message.success('新增成功！')
                             }else{
                                  this.$message.success('编辑成功！')
                             }
                             this.getPayApplyList({current:'1',size:'10'})
                        }else{
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
        },
        // 搜索
        search() {
            var obj = {}
            for (var i in this.searchData) {
                if (this.searchData[i]) {
                obj[i] = this.searchData[i]
                }
            }
            this.loading =true;
            obj["channelStatus"] &&( obj["channelStatus"] = obj["channelStatus"]== '停用' ? 'DISABLE' : 'ENABLE')
            this.getPayApplyList(obj)
        },
        getChannel() {
            getpay_channelId().then(res => {
                if (res.data.code == 'OK') {
                this.channel = res.data.data
                } else {
                this.$message.error('获取渠道失败')
                }
            })
        },
        getPayAppId() {
            // 获取应用id
            getpay_appId().then(res => {
                if (res.data.code == 'OK') {
                this.payApp = res.data.data.records
                } else {
                this.$message.error('获取应用失败')
                }
            })
        },
        add() {
            this.methods = "POST";
            this.word = "添加"
            this.fileList =[];
            this.dialog_add = true;
            this.$refs['addFrom'] &&(this.$refs['addFrom'].resetFields())
            this.addFrom = {}
        },
        getPayApplyList(data) {
            this.loading= true;
            Getlist(data).then(res => {
                if (res.data.code == 'OK') {
                    this.loading = false
                    this.total = res.data.data.total
                    this.list.tbody = res.data.data.records.map(item => {
                        item.gmtCreate = this.switchTime(item.gmtCreate)
                        item.gmtUpdate = this.switchTime(item.gmtUpdate)
                        item.channelStatus = item.channelStatus == 'DISABLE' ? '停用' : '启用'
                        return item
                    })
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        handSize(val) {
             this.getPayApplyList({current:val,size:'10'})
        },
        // 停用
        on_off(v, i) {
            var obj = {
                appChannelId: v.appChannelId,
                channelStatus: i
            }
            setStatus(obj).then(res => {
                // console.log(res.data.code)
                if (res.data.code == 'OK') {
                this.getPayApplyList({current:'1',size:'10'})
                }
            })
        },
    // 删除
        del(app) {
            var obj = [];
                obj.push(app.appChannelId);
            this.delMessage(()=>{
                delApp(obj).then(res => {
                    if(res.data.code=="OK"){
                        this.$message.success('删除成功！')
                        this.getPayApplyList({current:'1',size:'10'})
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            })
            
        },
        // 搜索
        changeData(data) {
            this.dialog_add = data
        }
    }
}
</script>

<style lang="css" scoped>
@import "../../../styles/common.css";
.el-table,
.el-table th > .cell {
  text-align: center;
}
.add {
  margin: 10px;
}
</style>
